<!-- 双重输入组件 -->
<template>
  <div>
    <q-input
      v-model="content"
      :label="label"
      :hint="hint"
      :dense="dense"
      @keyup.enter.native="checkValue"
    ></q-input>
  </div>
</template>


<script>
export default {
  name: "doubleInput",
  props: {
    // 下方提示文字
    msg: {
      type: String,
      default: undefined,
    },
    // label
    label: {
      type: String,
      default: "label",
    },
    // 是否开启双重输入
    isDouble: {
      type: Boolean,
      default: false,
    },
    // 开启双重输入之后的msgs必须是个数组
    msgs: {
      type: Array,
      default: () => undefined,
    },
  },
  data() {
    return {
      placeholder: "占位符",
      dense: false,
      content: undefined,
      hint: undefined,
      tempValue: undefined,
    };
  },

  created() {
    this.init();
  },

  watch: {
    content: function (oldVal, newVal) {
      if (newV) {
      }
    },
  },

  methods: {
    init() {
      this.isDouble ? (this.hint = this.msgs[0]) : (this.hint = this.msg);
      this.content = undefined;
      this.tempValue = undefined;
    },
    checkValue() {
      console.log("checkValue");
      if (!this.tempValue) {
        this.tempValue = this.content;
        this.content = undefined;
        this.hint = this.msgs[1];
        return;
      }
      if (this.tempValue == this.content) {
        console.log("校验通过");
        this.init();
      } else {
        console.log("校验失败");
        this.init();
      }
    },
  },
};
</script>

<style scoped>
</style>